<template>
	<view class="app-container">
		<view class="header">
			<view class="flex items-center justify-between">
				<view class="flex items-center basic-info">
					<image src="https://q8.itc.cn/q_70/images03/20241119/701f4eae40e94a798fe10cf1988071e1.png" mode="">
					</image>
					<view class="nickname">HEY。🔥</view>
				</view>
				<view class="rule">推广规则</view>
			</view>
			<view class="flex items-center justify-between level">
				<view>
					<view style="color: #724d2b;font-weight: bold;" class="font-base">等级未解锁</view>
					<view style="color: #724d2b;" class="font-sm">下单、邀请好友均可提升等级</view>
				</view>
				<view class="btn font-sm">做任务</view>
			</view>
		</view>
		<view class="main">
			<view class="box box-1">
				<view class="flex justify-between">
					<view>
						<view class="label font-base">可提现（元）</view>
						<view class="price">0.00</view>
					</view>
					<view class="label font-sm">提现记录></view>
				</view>
				<view style="margin: 40rpx 0;" class="flex">
					<view class="flex-1">
						<view class="label font-sm">总佣金</view>
						<view class="value">0.00</view>
					</view>
					<view class="flex-1">
						<view class="label font-sm">已提现佣金</view>
						<view class="value">0.00</view>
					</view>
					<view class="flex-1">
						<view class="label font-sm">提现中佣金</view>
						<view class="value">0.00</view>
					</view>
					<view class="flex-1">
						<view class="label font-sm">待结算佣金</view>
						<view class="value">0.00</view>
					</view>
				</view>
				<view class="btn">申请提现</view>
			</view>
			<view class="box-2">
				<view class="box flex items-center">
					<view class="icon">
						<image src="../../../static/icon/center/group.svg" mode=""></image>
					</view>
					<view style="margin-left: 20rpx;">
						<view class="label font-base">团队</view>
						<view class="value font-sm">0人</view>
					</view>
				</view>
				<view class="box flex items-center">
					<view class="icon">
						<image src="../../../static/icon/center/distribution.svg" mode=""></image>
					</view>
					<view style="margin-left: 20rpx;">
						<view class="label font-base">分销商</view>
						<view class="value font-sm">0人</view>
					</view>
				</view>
			</view>
			<view class="box box-3">
				<view class="flex items-center" v-for="(item,index) in menuList" :key="index">
					<view class="icon">
						<image :src="item.icon || '../../../static/logo.png'" mode=""></image>
					</view>
					<view style="margin-left: 20rpx;">
						<view class="label font-base">{{item.title}}</view>
						<view class="value font-sm">{{item.subTitle}}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	const menuList = [{
		icon: '../../../static/icon/center/withDrawal.svg',
		title: '提现明细',
		subTitle: '累计佣金￥0.00'
	},{
		icon: '../../../static/icon/center/order.svg',
		title: '分销订单',
		subTitle: '分销订单明细'
	},{
		icon: '../../../static/icon/center/invite.svg',
		title: '邀请好友',
		subTitle: '邀好友赚好礼'
	},{
		icon: '../../../static/icon/center/bill.svg',
		title: '账单报表',
		subTitle: '佣金变更明细'
	},{
		icon: '../../../static/icon/center/distributionGoods.svg',
		title: '分销商品',
		subTitle: '分销商品'
	},{
		icon: '../../../static/icon/center/ranking.svg',
		title: '佣金排行',
		subTitle: '您的排名为第17位'
	},{
		icon: '../../../static/icon/center/promotionRanking.svg',
		title: '推广人排行',
		subTitle: '您的排名为第17位'
	},{
		icon: '../../../static/icon/center/prize.svg',
		title: '等级说明',
		subTitle: '分销等级说明'
	}]
</script>
<style lang="scss">
	page{
		background-color: $uni-bg-color-grey;
		height: 100%;
	}
</style>
<style lang="scss" scoped>
	@import 'style.scss'
</style>